<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="账户密码">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="username"
              name="username"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit"> 提交 </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="手机号">
        <van-form @submit="onSubmit1">
          <van-cell-group inset>
            <van-field
              v-model="tel"
              name="tel"
              label="电话"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
            />
            <van-field
              v-model="code"
              type="code"
              name="code"
              label="验证码"
              placeholder="验证码"
              :rules="[{ required: true, message: '请填写验证码' }]"
            >
              <template #button>
                <van-button :disabled="!isTel || isCounting" type="primary" @click="getCode">{{
                  text
                }}</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit"> 提交 </van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="扫码登陆">
        <img v-if="urlImage" :src="urlImage" alt="" width="100%" height="400" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { showNotify } from 'vant'
import { useCountDown } from '@/hooks/useCountDown.js'
import QRCode from 'qrcode'
const active = ref(1)
const username = ref('')
const password = ref('')
const tel = ref('13111111111')
const code = ref('')
const router = useRouter()
const isTel = computed(() => {
  const reg =
    /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
  return reg.test(tel.value)
})
const time = 6

const { count, start, isCounting } = useCountDown(time)
const text = computed(() => {
  return isCounting.value ? `还剩${count.value}S获取` : '获取验证码'
})

const onSubmit = async (values) => {
  const resp = await axios.post('/api/login', values)
  const { code, data, message } = resp.data
  if (code === 200) {
    router.push('/')
    showNotify({ type: 'success', message: message })
  } else {
    showNotify({ type: 'danger', message: message })
  }
}
const onSubmit1 = async (value) => {
  const resp = await axios.post('/api/login/tel', value)
  const { code, data, message } = resp.data
  if (code === 200) {
    router.push('/')
    showNotify({ type: 'success', message: message })
  } else {
    showNotify({ type: 'danger', message: message })
  }
}
const getCode = async () => {
  // 请求验证码
  const resp = await axios.get('/api/login/getCode', { params: { tel: tel.value } })

  const { code, message, data } = resp.data
  if (code === 200) {
    console.log(data)
    showNotify({ type: 'success', message: message + ':' + data })
  } else {
    showNotify({ type: 'danger', message: message })
  }

  // 倒计时
  start()
}

const urlImage = ref('')
// With promises
QRCode.toDataURL('http://www.baidu.com')
  .then((url) => {
    urlImage.value = url
  })
  .catch((err) => {
    console.error(err)
  })
</script>
